<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
	<style type="text/css">
		html,body{
			background-color:white;/*#F8F8F8*/;
			height:100%;
			doverflow:hidden;
		}
		
		body{
			border:1px dotted red;	
			font-family: Tahoma, Helvetica, Arial,sans-serif;
			margin:0;
			padding:0;
		}

		#field{
			position:relative;
			border:3px solid blue;
			width:1000px;
			height:500px;
			overflow-y:auto;
			overflow-x:hidden;
			background:#f6f6f6;
		} 
	</style>
    <!--   引入jQuery -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" type="text/css" href="../../css/messagebox.css" id="haha"/>
	<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
	<link rel="stylesheet" type="text/css" href="../../css/tabletree.css" />
	<link rel="stylesheet" type="text/css" href="../../css/combobox.css" />
	
	<script type="text/javascript" src="../../js/jquery/jquery.js"></script>
    <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js"></script>
    <script type="text/javascript" src="../../js/ctp/public/ctp.core.js"></script>
    <script type="text/javascript" src="../../js/ctp/public/jquery.ctp.jslog.js"></script>
    <script type="text/javascript" src="../../js/ctp/tabletree/ctp.ui.tabletree.js"></script>
	<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
	<script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js"></script>
	
	<script type="text/javascript" src="../../js/ctp/grid/jquery.jeditable_g.js"></script>
	<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js"></script>
	<script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js"></script> 
	<script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js"></script>  
    <script type="text/javascript" src="../../js/ctp/public/jsextend.js"></script>
    <script type="text/javascript" src="../../js/ctp/datepicker/ctp.ui.datepicker.js"></script>
	
	<script type="text/javascript">		
			function selfAlert(){
				//alert(this.innerHTML);	
			}
			
			function mover(){
				//this.style.background='red';
			}
		</script>
</head>
<body>
	
	<h1>Table Tree</h1>
	<input type="button" value="close all" onclick="p.closeAll();">
	<input type="button" value="open all" onclick="p.openAll();">
	<input type="button" value="close 1" onclick="p.closeLevel(1);">
	<input type="button" value="close 2" onclick="p.closeLevel(2);">
	<input type="button" value="close 3" onclick="p.closeLevel(3);">
	<input type="button" value="close 4" onclick="p.closeLevel(4);">
	<input type="button" value="open 1" onclick="p.openLevel(1);">
	<input type="button" value="open 2" onclick="p.openLevel(2);">
	<input type="button" value="open 3" onclick="p.openLevel(3);">
	<input type="button" value="open 4" onclick="p.openLevel(4);">
	<input type="button" value="search" onclick="p.searchInTableCell('湖北省分行',[1,2,3]);">
	<input type="button" value="search" onclick="p.searchInTableCell('中国工商银行总行',[2,3]);">
	<input type="button" value="add" onclick="p.addNode({nodeInJson:[{ctp_ui_tableTree:{pos:'1_',self:'1010100000'},name:'中国工商银行总行',description:'顶级机构',status:'1',region_id:'',net_terminal:'',parent_id:'',branch_level:'1',modi_user:'888899998',modi_time:'20090518',short_name:'总行',branch_category:'0',deleted:'0',reserved:''}]});p.searchInTableCell('中国工商银行总行',[2,3])">
	<input type="button" value="add" onclick="p.addNode({nodeInJson:[{ctp_ui_tableTree:{pos:'1_',self:'1010100000'},name:'中国工商银行总行',description:'顶级机构',status:'1',region_id:'',net_terminal:'',parent_id:'',branch_level:'1',modi_user:'888899998',modi_time:'20090518',short_name:'总行',branch_category:'0',deleted:'0',reserved:''}]});">
	<input type="button" value="scrollHeight" onclick="alert($('#field')[0].scrollHeight+' '+$('#field')[0].offsetWidth+' '+$('.ctp_ui_tabletree table.mainTable')[0].offsetWidth);">
	<input type="button" value="render" onclick="alert(typeof ('1'*1))//p.renderTo('field');">
	<input type="button" value="selected" onclick="p.getSelectedObj();">
	<input type="button" value="unDragByClass" onclick="p.reload()//p.unDragByClass('abc');">
	<input type="button" value="reload" onclick="p.snap();p.reload({callback:function(){this.snapToReal()}});">
	<input type="button" value="getStyle" onclick="p.getStyle('tree.css');">
	<input type="button" value="select" onclick="p.selectRow(1);alert(ctp.data.jsonToStr(p.settings.tableInJson))">
	<input type="button" value="aaaa" onclick="$('#field').width('1500px');">
	<input type="button" value="print" onclick="alert(p.getSelectedObj()[0].ctp_ui_tableTree.pos)">
	<!--<button onclick="alert($('html')[0].scrollLeft+' '+$('html')[0].scrollTop);">s</button>-->
	<!--<div id="fieldp"><div id="field"></div></div>-->
	<div id="field"></div>
	<!--<table>
		<tr><td rowspan="5">层级</td><td rowspan="4" colspan="2">r4c2</td><td colspan="12">r1c15</td></tr>
		<tr><td rowspan="4">描述</td><td rowspan="4">状态</td><td colspan="10">r1c10</td></tr>
		<tr><td rowspan="3">区域id</td><td rowspan="3">网络终端号</td><td rowspan="3">上级id</td><td rowspan="3">机构级别</td><td rowspan="3">修改柜员</td><td colspan="5">r2c5</td></tr>
		<tr><td rowspan="2">修改时间</td><td rowspan="2">简称</td><td rowspan="2">机构类别</td><td colspan="2"></td></tr>
		<tr><td>id</td><td>名称</td><td>是否已删除</td><td>是否保留</td></tr>
	</table>-->
</body>

		<script type="text/javascript">
			//try{document.execCommand('BackgroundImageCache',false,true);}catch(e){}
			$(function(){try{document.execCommand('BackgroundImageCache',false,true);}catch(e){;}});
			var p,panel,date0=new Date();
		$(window).load(function(){
			panel= new ctp.ui.panel({
			  	id:'panel2',
			  	title: 'ctp panel',
			  	collapsible: true,
			  	drenderTo: 'ddfield',
				largeRenderTo:'field',
				html:'panelhtml',
				style:'simple',
				btnstatus : true});
			p=new ctp.ui.tabletree({actionPos:8,check:true,resizable:true,dragNode:true,//tableHead:['层级','id','名称','描述','状态','区域id','网络终端号','上级id','机构级别','修改柜员','修改时间','简称','机构类别','是否已删除','是否保留'],
									width:'auto',height:'auto',selectRow:true,
				/*tableHead:[[{text:'r1c1'},{text:'r4c2',rowspan:4,colspan:2},{text:'r1c15',colspan:12}],
					[{text:'层级',rowspan:4},{text:'r2c1',rowspan:2,colspan:2},{text:'r3c1',rowspan:3},{text:'r1c9',colspan:9}],
					[{text:'网络终端号',rowspan:3},{text:'上级id',rowspan:3,event:[['click',selfAlert],['mouseover',mover]]},{text:'机构级别',rowspan:3},{text:'修改柜员',rowspan:3},
						{text:'r2c1',rowspan:2},{text:'r1c4',colspan:4}],
					[{text:'描述',rowspan:2},{text:'状态',rowspan:2},{text:'简称',rowspan:2},{text:'机构类别',rowspan:2},{text:'r1c2',colspan:2}],
					[{text:'id'},{text:'名称',event:[['click',selfAlert],['mouseover',mover]]},{text:'区域id'},{text:'修改时间'},{text:'是否已删除'},{text: '是否保留'}]],*/
				/*tableHead:[[{text:'选择',rowspan:5},{text:'r4c2',rowspan:4,colspan:1},{text:'r1c15',colspan:12}],
					[{text:'r2c1',rowspan:2,colspan:2},{text:'r3c1',rowspan:3},{text:'r1c9',colspan:9}],
					[{text:'网络终端号',rowspan:3},{text:'上级id',rowspan:3,width:'90px',event:[['click',selfAlert],['mouseover',mover]]},{text:'机构级别',rowspan:3,width:'30px'},{text:'修改柜员',rowspan:3},
						{text:'r2c1',rowspan:2},{text:'r1c4',colspan:4}],
					[{text:'描述',rowspan:2},{text:'状态',rowspan:2},{text:'简称',rowspan:2},{text:'机构类别',rowspan:2},{text:'r1c2',colspan:2}],
					[{text:'名称',event:[['click',selfAlert],['mouseover',mover]]},{text:'区域id'},{text:'修改时间'},{text:'是否已删除'},{text: '是否保留',width:'10px'}]],*/
				tableHead:[[{text:'选择'},{text:'名称',width:'50px',dedit:{fieldName:'field1',fieldType:'textfield'}},
							{text:'描述'},{text:'状态'},{text:'区域id'},
							{text:'网络终端号',width:'0px'},{text:'上级id',width:'90px'},
							{text:'机构级别',width:'90px'},{text:'修改柜员'},
							{text:'修改时间'},{text:'简称'},
							{text:'机构类别'},{text:'是否已删除'},
							{text: '是否保留'}]],
				url:'fivesheng.json',
				nodeUrlPrefix:'',
				donSelect:function(){alert('hhaa')},
				dcallback:function(){alert(this.settings)},
				donDragEnd:function(a,b,c){//alert($('#'+p.getDomId()+' tr[self='+a.attr("parent")+']').html())
										alert(p.getNextSibling(a).html());
										alert(p.getPrevSibling(a).html())
										},
				dtableInJson:[
					{ctp_ui_tableTree:{imgUrl:'../plus.gif',url:'D:/workspace/ctpdemo/WebContent/jsdemo/tabletree/fivesheng.json',childNum:'',pos:'1_',extraClass:'ondrag',self:'0010100000'},name:'中国工商银行总行',description:'顶级机构',status:'1',region_id:'',net_terminal:'',parent_id:'',branch_level:'1',modi_user:'888899998',modi_time:'20090518',short_name:'总行',branch_category:'0',deleted:'0',reserved:''}
				],id:'myTableTree',remember:false,renderTo:'field'});//alert((new Date())-date0);//var aaa=[1,2,3,4];aaa.splice(0,aaa.length);
				
		});
		
		
	</script>
</html>
